<template>
    <div class="login-box ub main-center cross-center">
        <el-form
                :model="loginForm"
                ref="form"
                :rules="rules"
                class="login-container"
                size="normal"
        >
            <el-form-item label="">
                <div class="login-title">系统登录</div>
            </el-form-item>
            <el-form-item label="" prop="username">
                <el-input
                        v-model="loginForm.username"
                        placeholder="请输入用户名"
                        size="normal"
                        clearable
                        @change="change"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
                <el-input
                        v-model="loginForm.password"
                        placeholder="请输入密碼"
                        size="normal"
                        show-password
                        clearable
                        @change="change"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="code" label>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-input
                                v-model="loginForm.code"
                                placeholder="请输入验证码"
                        ></el-input>
                    </el-col>
                    <el-col :span="8">
                        <img :src="imgSrc" class="codeImg" @click="getkatpcha"/>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-row type="flex" justify="center">
                <div class="err-msg">
                    {{errMsg}}
                </div>
            </el-row>

            <el-form-item>
                <el-row type="flex" justify="start">
                    <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                </el-row>
            </el-form-item>

            <el-form-item label>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-button @click="submit()" class="my-button" type="primary"
                        >登录
                        </el-button
                        >
                    </el-col>
                    <el-col :span="12">
                        <el-button class="my-button">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import storage from "../utils/DmzUtil";
    import store from "../store";

    export default {
        name: "Login",
        data() {
            return {
                errMsg: "",
                imgSrc: "",
                loginForm: {
                    username: "",
                    password: "",
                    code: "",
                    rememberMe: "1",
                },
                rules: {
                    username: [
                        {
                            required: true,
                            trigger: "change",
                            message: "请输入用户名",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            trigger: "change",
                            message: "请输入密码",
                        },
                    ],
                    code: [
                        {
                            required: true,
                            trigger: "change",
                            message: "请输入验证码",
                        },
                    ],
                },
            };
        },
        methods: {
            getkatpcha() {
                this.imgSrc = "/api/pub/kaptcha?captcha_key=" + Math.random();
            },
            change() {
            },
            async submit() {
                let _this = this;
                _this.errMsg = "";
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let data = {};
                        data.username = _this.loginForm.username;
                        data.password = _this.loginForm.password;
                        data.rememberMe = _this.loginForm.rememberMe;
                        data.code = _this.loginForm.code;
                        data.type = "1";

                        let {data: res} = await _this.$http.login(data);
                        if (res.code == 0) {
                            let accessToken = res.data.accessToken;
                            storage.setSession("accessToken", accessToken);
                            store.dispatch("loginstore/getMenuListAction", this.$router).then(()=>{
                                this.$router.push("/home");

                            });
                            // // 存储菜单数据
                            // // 跳转到路由
                        } else {
                            this.errMsg = res.msg;
                        }
                    }
                });
            },
        },
        mounted() {
            this.getkatpcha();
        },
    };
</script>

<style scoped lang="scss">
    .login-box {
        height: 100vh;

        .login-container {
            width: 350px;
            border-radius: 10px;
            box-shadow: 0 0 25px #cac6c6;
            padding: 20px 35px;

            .login-title {
                font-size: 28px;
                font-family: "Courier New", Courier, monospace;
            }

            .err-msg {
                height: 14px;
                font-size: 12px;
                color: red;
            }

        }
    }
</style>